<script lang="ts" setup>
import useToast from '@/hooks/useToast';
import HomeRequest from '@/request/homeRequest';

const todayStatus = ref<{ state: number; stateText: string; icon: string }[]>([
  { state: 1, stateText: '良好', icon: 'https://pic.kanglailab.com/common/satisfaction.png' },
  { state: 2, stateText: '一般', icon: 'http://pic.kanglailab.com/common/normalsatisfaction.png' },
  { state: 3, stateText: '不好', icon: 'http://pic.kanglailab.com/common/dissatisfaction.png' },
]);
const selectStatus = ref<number | undefined>(undefined);
const remarks = ref<string>('');
const { showToast } = useToast();

// 打卡状态提交
const handleSubmitTodayStatus = () => {
  if (!selectStatus.value) {
    showToast('请先选择状态');
    return;
  }
  HomeRequest.HealthCheckInSubmit({ healthState: selectStatus.value, describes: remarks.value, hasLoading: true }).then((res) => {
    showToast(res.data === 2 ? '打卡成功，积分加10' : '打卡成功');
  });
};
</script>

<template>
  <view class="c-pd h-screen bg-white">
    <view class="c-color-sec fw-bold text-center c-text-16">请选择今日健康状态</view>
    <view class="mt-12px flex">
      <view class="flex-1 px-12px" v-for="item in todayStatus" :key="item.state" @click="selectStatus = item.state">
        <image class="w-full h-80px" :src="item.icon" mode="widthFix" />
        <view class="text-center fw-bold w-full" :class="{ 'c-color-sec': selectStatus === item.state }">{{ item.stateText }}</view>
      </view>
    </view>
    <view class="my-24px">
      <textarea class="c-pd bg-#f5f5f5 w-full c-br" placeholder="请填写备注" :maxlength="50" @blur="remarks = $event.detail.value" />
    </view>
    <van-button type="primary" block class="w-full" @click="handleSubmitTodayStatus"> 提交订单 </van-button>
  </view>
</template>
